<template>
   <el-carousel height="425px" arrow="never" ref="carousel">
      <div class="btn">
      <div>
        <el-button icon="el-icon-arrow-left" circle @click="prev"></el-button>
      </div>
      <div>
        <el-button icon="el-icon-arrow-right" circle @click="next"></el-button>
      </div>
    </div>
      <el-carousel-item v-for="(item,index) in list" :key="index">
        <a :href="item.url" target="_blank">
          <img :src="item.img"  :alt="item.alt" />
        </a>
      </el-carousel-item>
    </el-carousel>
</template>

<script>
export default {
  name: "Rim",
  components: {},
  data() {
    return {
      list:[{
        img:'https://www.xiuzhanwang.com/style/ad/banner10.jpg',
        url:'/mall',
        alt:'加盟'
      },
      {
        img:'https://www.xiuzhanwang.com/style/ad/viptehui.jpg',
        url:'/mall',
        alt:'代理加盟'
      },
      {
        img:'https://www.xiuzhanwang.com/style/ad/banner11.jpg',
        url:'/mall',
        alt:'代理加盟'
      }
      ]
    }
  },
  methods: {
    next(){
      this.$refs.carousel.next()
    },
    prev(){
      this.$refs.carousel.prev()
    }
  },
};
</script>

<style lang="scss" scoped>

.btn {
  width: 1300px;
  height: 36px;
  position: relative;
  margin: 0 auto;
   top: 50%;
   transform: translateY(-50%);
  z-index: 10;
  // background:#FFF;
  div:hover{
    background: rgba(31, 45, 61, .2);
  }
  div {
    height: 36px;
    width: 36px;
    position: absolute;
    top: 50%;
    border-radius: 50%;
    cursor: pointer;
    transform: translateY(-50%);
    background: rgba(31, 45, 61, .1);
  }
  .el-button {
    border: none;
    color: #fff;
    background: none;
  }
  div:nth-child(1) {
    left:  0;
  }
  div:nth-child(2) {
    right: 0;
  }
}
 a{
    width: 100%;
    position: absolute;
    left: 50%;
    margin-left: -960px;
  }


.el-carousel__item:nth-child(4){
  background-image: linear-gradient(
    to   right bottom,
    #FF5951,
    #FDB271
  );
}
.el-carousel__item:nth-child(2){
  background-image: linear-gradient(
    to   right bottom,
    #F36D30,
    #F14B3C
  );
}
.el-carousel__item:nth-child(3){
  background-image: linear-gradient(
    to   right bottom,
    #D61F1F,
    #E75340
  );
}

 
// }
</style>
